<div class="box">
  <div class="top">
    <x-button x-popover content="上左上左上左上左上左上左上左上左上左上左" placement="top-start">上左</x-button>
    <x-button x-popover content="上中上中上中上中上中上中上中上中上中上中" placement="top">上中</x-button>
    <x-button x-popover content="上右上右上右上右上右上右上右上右上右上右" placement="top-end">上右</x-button>
  </div>
  <div class="left">
    <x-button x-popover content="左上左上左上左上左上左上左上左上左上左上" placement="left-start">左上</x-button
    ><x-button x-popover content="左中左中左中左中左中左中左中左中左中左中" placement="left">左中</x-button
    ><x-button x-popover content="左下左下左下左下左下左下左下左下左下左下" placement="left-end">左下</x-button>
  </div>
  <div class="right">
    <x-button x-popover content="右上右上右上右上右上右上右上右上右上右上" placement="right-start">右上</x-button
    ><x-button x-popover content="右中右中右中右中右中右中右中右中右中右中" placement="right">右中</x-button
    ><x-button x-popover content="右下右下右下右下右下右下右下右下右下右下" placement="right-end">右下</x-button>
  </div>
  <div class="bottom">
    <x-button x-popover content="下左下左下左下左下左下左下左下左下左下左" placement="bottom-start">下左</x-button
    ><x-button x-popover content="下中下中下中下中下中下中下中下中下中下中" placement="bottom">下中</x-button
    ><x-button x-popover content="下右下右下右下右下右下右下右下右下右下右" placement="bottom-end">下右</x-button>
  </div>
</div>
